<template>
  <div>
    <el-row>
      <el-col>
        <el-form :model="pageParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="发起人" prop="startUserName">
            <el-input
              v-model="pageParams.startUserName"
              placeholder="请输入任务发起人"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="流程名称" prop="processDefinitionName">
            <el-input
              v-model="pageParams.processDefinitionName"
              placeholder="请输入流程名称"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="是否结束" prop="isOver">
            <el-select v-model="pageParams.isOver" placeholder="是否结束">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="list">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="formData"
          style="width: 100%"
          max-height="500">
          <el-table-column
            fixed
            label="序号"
            width="90">
            <template slot-scope="scope">
              {{ (pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="processInstanceId"
            label="流程实例id"
            width="150">
          </el-table-column>
          <el-table-column
            prop="processDefinitionId"
            label="流程定义id"
            width="150">
          </el-table-column>
          <el-table-column
            prop="processDefinitionVersion"
            label="流程版本"
            width="150">
          </el-table-column>
          <el-table-column
            prop="processDefinitionName"
            label="流程名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="processDeploymentId"
            label="流程部署id"
            width="150">
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            :formatter="formatDate"
            width="150">
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            :formatter="formatDate"
            width="150">
          </el-table-column>
          <el-table-column
            prop="durationInMillis"
            label="持续时间"
            width="150">
          </el-table-column>
          <el-table-column
            prop="processInstanceId"
            label="流程实例id"
            width="150">
          </el-table-column>
          <el-table-column
            prop="startUsername"
            label="流程发起人"
            width="150">
          </el-table-column>
          <el-table-column
            label="负责人名称"
            width="150">
            <template slot-scope="scope">
              {{ scope.row.assigneeName || scope.row.candidateGroupNames || scope.row.candidateUserNames }}
            </template>
          </el-table-column>
          <el-table-column
            prop="currentActivitiName"
            label="当前节点名称"
            width="150">
          </el-table-column>
          <el-table-column
            label="是否强制终止"
            width="150">
            <template scope="scope">
              {{ scope.row.deleteReason == null ? '否' : '是' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="deleteReason"
            label="终止原因"
            width="150">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="流程图片"
            width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="getProcessDiagram(scope.row.processInstanceId)"
                size="small">
                预览
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @prev-click="prev_click"
          @next-click="next_click"
          @size-change="size_change"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageParams.pageSize"
          :total="pageParams.total">
        </el-pagination>
      </el-col>
    </el-row>

    <!--图片预览-->
    <el-dialog :title="bpmnImage.title" :visible.sync="bpmnImage.open" width="80%" top="5vh" append-to-body
               class="scrollbar">
      <div v-html="bpmnImage.data"></div>
    </el-dialog>
  </div>
</template>

<script>

import {getProcessInstances, getProcessDiagram} from '@/api/bpmn/activiti'
import {formatDate} from '@/api/bpmn/utils'

export default {
  name: '全部流程',
  data() {
    return {
      formData: [],
      pageParams: {
        pageSize: 10,
        pageNum: 1,
        total: undefined,
        startUserName: undefined,
        processDefinitionName: undefined,
        isOver: undefined
      },
      options: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      bpmnImage: {
        title: "预览",
        open: false,
        data: null
      }
    }
  },
  created() {
    this.list()
  },
  methods: {
    // 预览
    getProcessDiagram(processInstanceId){
      getProcessDiagram(processInstanceId)
        .then(res => {
          this.bpmnImage.data = res
          this.bpmnImage.open = true
        })
    },
    list() {
      getProcessInstances(this.pageParams)
        .then(res => {
          this.pageParams.total = res.total
          this.formData = res.rows
        })
        .catch(err => {
          this.$message.error('获取失败')
        })
    },
    formatDate(row, column, cellValue) {
      return formatDate(row, column, cellValue)
    },
    // 上一页
    prev_click() {
      this.pageParams.pageNum = this.pageParams.pageNum - 1
      this.list()
    },
    next_click() {
      this.pageParams.pageNum = this.pageParams.pageNum + 1
      this.list()
    },
    size_change(val) {
      this.pageParams.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val
      this.list()
    },
    resetQuery() {
      this.pageParams.startUserName = undefined
      this.pageParams.processDefinitionName = undefined
      this.pageParams.isOver = undefined
      this.list()
    }
  }

}

</script>
